import React from 'react'
import basicStyle from './basic.scss'
import { ElementSelector } from './elementSelector'
import { Input } from './Input'

export const renderEditorOfElementWithExtSelector = ({ index, onChangeField, readOnly, data }) => {
    const { elementSelectorId, page, extSelector = '' } = data

    return (<React.Fragment>
        <ElementSelector elementSelectorId={elementSelectorId} page={page} onSelectItem={element => onChangeField(index, 'elementSelectorId', element.id)} readOnly={readOnly} />
        <Input className='width_100px' value={extSelector} placeholder='附加selector' type='text' onChange={text => onChangeField(index, 'extSelector', text)} readOnly={readOnly} />
    </React.Fragment>)
}

export const renderLogOfElementWithExtSelector = ({ data }) => {
    const { element, extSelector = '' } = data
    const { selector, remark } = element || {}

    return <span className={basicStyle.abbr} title={`${selector}${extSelector}`}>{remark}{extSelector}</span>
}